<script setup lang="ts">
import { queryWeatherDaily, queryWeatherNow } from "@/api/bench";
import dayjs from "dayjs";
import { PxMessage } from "px-ui";
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import Calendar30 from "../Calendar30/index.vue";
import HoursWeather from "../HoursWeather/index.vue";
import WeatherList from "../WeatherList/index.vue";
const weatherData: any = ref({});
const warningData: any = ref([]);
const data30: any = ref([]);
const tab = defineModel("tab");
const day = ref();
const dateTime = ref();
const router = useRouter();
const city = "北京-大兴";
const getWeatherNow = async () => {
  const data = await queryWeatherNow(dateTime.value);
  weatherData.value = data?.now || {};
  warningData.value = data?.warning || [];
};
const getWeatherDaily = async () => {
  const data = await queryWeatherDaily();
  data30.value = data;
};
const {
  query: { fxDate, page }
} = useRoute();
const backMainPage = () => {
  if (page) {
    router.push({
      path: page
    });
  } else {
    router.push("/all/bench/home");
  }
};
onMounted(() => {
  if (fxDate) {
    day.value = dayjs(fxDate).format("YYYY年MM月DD日");
    dateTime.value = dayjs(fxDate).format("YYYY-MM-DD");
  } else {
    day.value = dayjs().format("YYYY年MM月DD日");
    dateTime.value = dayjs().format("YYYY-MM-DD");
  }
  getWeatherNow();
  getWeatherDaily();
});
const isToday = computed(() => {
  return dateTime.value === dayjs().format("YYYY-MM-DD");
});
const getTemperature = (temp?: string) => {
  return temp ? `${temp}℃` : "-";
};
const getDay = day => {
  const today = dayjs().format("YYYY-MM-DD");
  if (day === today) {
    return "今日";
  }
  return day ? day.split("-")[2] : "";
};
const handleClick = (val, index) => {
  if (index > 6) {
    return PxMessage.error("仅支持查看近7天天气详情");
  }
  if (!val || val === dateTime.value) {
    return;
  }
  dateTime.value = val;
  day.value = dayjs(val).format("YYYY年MM月DD日");
  getWeatherNow();
};
</script>
<template>
  <div class="weather" :key="`CurrentWeather${tab}`">
    <div class="weather-box mb-[24px]">
      <px-button style="margin-bottom: 16px" icon="ArrowLeft" type="primary" @click="backMainPage">返回 </px-button>
      <div class="flex-row mb-[18px]">
        <div class="flex flex-center">
          <div v-if="isToday" class="temp">{{ weatherData.temp }}℃</div>
          <div class="temperature">
            <span class="start">{{ getTemperature(weatherData.tempMin) }}</span> ~
            <span class="end">{{ getTemperature(weatherData.tempMax) }}</span>
          </div>
          <div class="weather-icon-box ml-[20px]">
            <i :class="`qi-${weatherData.icon}`" />
            <span class="ml-[8px] icon-text">{{ weatherData.text }}</span>
          </div>
          <div class="warning ml-[11px]">
            <px-tooltip v-for="item in warningData" :key="item.id" :content="item.text">
              <i :class="`qi-${item.type} ${item.severityColor} ml-[16px]`" />
            </px-tooltip>
          </div>
        </div>
        <div class="day">
          <span>{{ day }}</span>
          <span class="city">{{ city }}</span>
        </div>
      </div>
      <div class="flex-row">
        <px-scrollbar class="list-scroll">
          <WeatherList :weatherData="weatherData" />
        </px-scrollbar>
        <div class="tab-list">
          <div class="tab-item active">天气预报</div>
          <div class="tab-item" @click="tab = 1">历史天气</div>
        </div>
      </div>
    </div>
    <div class="weather-box mb-[24px]">
      <HoursWeather :tab="tab" type="future" :dateTime="dateTime" />
    </div>
    <div class="weather-box mb-[24px]">
      <Calendar30 v-model="dateTime">
        <template #date-cell="{ data: { day, index, isSelected } }">
          <div :class="isSelected ? 'is-selected flex-row calendar-day' : 'flex-row calendar-day'" @click="handleClick(day, index)">
            <span class="date">{{ getDay(day) }}</span>
            <div v-if="day" class="flex-row flex-center ml-[4px]">
              <p>
                <span>{{ data30[index]?.tempMin || "-" }}℃</span>~<span>{{ data30[index]?.tempMax || "-" }}℃</span>
              </p>
              <px-tooltip :content="data30[index]?.text">
                <span class="icon ml-[16px]"><i :class="`qi-${data30[index]?.icon}`" /></span>
              </px-tooltip>
            </div>
          </div>
        </template>
      </Calendar30>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.weather {
  .calendar-day {
    height: 100%;
    padding: 0 16px;
  }

  .icon {
    font-size: 24px;
    color: rgb(59 130 246 / 100%);
    text-align: center;
  }

  .date {
    font-weight: bold;
    line-height: 22px;
  }

  .tab-list {
    display: flex;
    align-items: center;
    height: 41px;
    padding: 4px;
    margin-left: 32px;
    background: #f4f4f4;
    border-radius: 4px;
  }

  .tab-item {
    width: 88px;
    height: 34px;
    font-weight: 400;
    line-height: 34px;
    color: rgb(0 0 0 / 80%);
    text-align: center;
    cursor: pointer;
  }

  .active {
    color: #fff;
    background: #4089f7;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 #b5d2fe;
  }

  .flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .flex-center {
    align-items: center;
  }

  .temp {
    margin-right: 27px;
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
    color: #3b82f6;
  }

  .weather-icon-box {
    font-size: 22px;
  }

  .icon-text {
    font-size: 14px;
  }

  .city {
    margin-left: 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    color: #000;
  }

  .weather-box {
    padding: 24px;
    background-color: #fff;
    border-radius: 4px;
  }

  .air-tag {
    padding: 0 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
    border-radius: 15px;
  }

  .warning {
    font-size: 24px;
  }

  .White {
    color: #eee;
  }

  .Blue {
    color: #4089f7;
  }

  .Green {
    color: #30d158;
  }

  .Yellow {
    color: yellow;
  }

  .Orange {
    color: #f59e0b;
  }

  .Red {
    color: #ef4444;
  }

  .Black {
    color: #333;
  }

  .list-scroll {
    flex-grow: 1;
    width: 20%;
  }
}
</style>
